<template>
  <div class="layout">
    <aside class="sidebar">
      <div class="logo">
        <i class="fas fa-lock"></i>
        <span>CRM系统</span>
      </div>
      <nav>
        <router-link to="/customer" active-class="active">客户管理</router-link>
        <router-link to="/business" active-class="active">业务管理</router-link>
        <router-link to="/workorder" active-class="active">工单管理</router-link>
        <router-link to="/user" active-class="active">人员管理</router-link>
      </nav>
    </aside>
    <div class="main">
      <header class="header">
        <span>欢迎使用CRM系统</span>
        <span class="user-info">管理员 | <a href="/login.html">退出</a></span>
      </header>
      <main>
        <slot />
      </main>
    </div>
  </div>
</template>

<script setup>
// 不用脚本
</script>

<style scoped>
.layout { display: flex; height: 100vh; }
.sidebar {
  width: 200px;
  background: #16a085;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 32px;
}
.logo { font-size: 22px; margin-bottom: 32px; display: flex; align-items: center; gap: 8px; }
nav { display: flex; flex-direction: column; gap: 18px; width: 100%; }
nav a {
  color: #fff;
  text-decoration: none;
  padding: 10px 24px;
  border-radius: 4px 0 0 4px;
  transition: background 0.2s;
}
nav a.active, nav a:hover { background: #138d75; }
.main { flex: 1; display: flex; flex-direction: column; }
.header {
  height: 56px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  border-bottom: 1px solid #eee;
}
.user-info { color: #16a085; }
main { flex: 1; background: #f8f8f8; padding: 32px; overflow: auto; }
</style>